<template>
  <view class="draw-body">
    <view class="dialog-box">
      <image
        class="bg-image absolute top-0 left-0 w-320px h-344px"
        :src="currentBg"
      />
      <template v-if="couponStatus === 'default'">
        <image
          class="w-236px h-118px mx-auto mt-97px"
          :src="ossImg('others/couponcode/stride_title.png')"
        />
        <!-- <view class="code-input">
          <input
            v-model="couponCode"
            placeholder="请输入兑换码"
            placeholder-style="color: #75ADF8;font-weight: 400"
            @click="inputCouponCode"
          />
          <image
            class="w-260px h-60px"
            :src="ossImg('others/couponcode/input.png')"
          />
        </view> -->
        <view class="text-12px text-white text-center mt-12px">
          优惠券将在确认领取后5-30分钟后到账
        </view>
        <image
          class="w-180px h-53px mx-auto mt-23px"
          :src="ossImg('others/couponcode/btn.png')"
          @click.stop="handleSubmit"
        />
      </template>
      <template v-if="couponStatus === 'error'">
        <!-- <image
          class="w-237px h-200px mx-auto mt-29px"
          :src="ossImg('others/couponcode/err/err_tips.png')"
        /> -->
        <view class="text-19px text-white text-center mt-203px">
          已达到领取上限
        </view>
        <image
          class="w-180px h-53px mx-auto mt-47px"
          :src="ossImg('others/couponcode/err/but_close.png')"
          @click.stop="closeErr"
        />
      </template>
      <template v-if="couponStatus === 'success'">
        <image
          class="w-242px h-150px mx-auto mt-124px"
          :src="ossImg('others/couponcode/success/stride_success_title.png')"
        />
        <!-- <image class="w-199px h-106px mx-auto mt-13px" :src="couponInfo.icon" /> -->
        <view
          class="text-12px text-white text-center mb-17px"
          style="margin-top: -15px"
        >
          优惠券将在确认领取后5-30分钟后到账
        </view>
        <view class="flex justify-center">
          <image
            class="w-114px h-42px mr-17px"
            :src="ossImg('others/couponcode/success/use_btn.png')"
            @click.stop="toGoods"
          />
          <image
            class="w-114px h-42px"
            :src="ossImg('others/couponcode/success/view_btn.png')"
            @click.stop="lookCode"
          />
        </view>
      </template>
    </view>
    <image
      class="w-27px h-27px mx-auto mt-14px"
      :src="ossImg('others/couponcode/stride_close.png')"
      @click.stop="toClose"
    />
  </view>
</template>
  
  <script setup>
import { ref, computed, defineEmits } from "vue";
import { addCoupon } from "@/services/coupon";
import { ossImg, debounce } from "@/utils/utils";

let enterTime = new Date();
let outTime = "";
let stayTime = "";

const emits = defineEmits(["close", "upData"]);
// const couponCode = ref("");
const couponStatus = ref("default");
const couponInfo = ref({});
const miniProgram = wx.getAccountInfoSync().miniProgram;
const currentBg = computed(() => {
  const bg = {
    default: ossImg("others/couponcode/stride_bg.png"),
    error: ossImg("others/couponcode/err/stride_err_bg.png"),
    success: ossImg("others/couponcode/success/stride_success_bg.png"),
  };
  return bg[couponStatus.value];
});

const handleSubmit = debounce(
  async () => {
    getApp().emdlz(
      "track",
      "event",
      "Stride_Campaign_get_page",
      "click",
      "check_get",
      ""
    );

    // 判断是否登录
    // if (
    //   getApp().globalData.user.nickname === null ||
    //   getApp().globalData.user.nickname === "" ||
    //   getApp().globalData.user.nickname === undefined
    // ) {
    //   return getApp().getWechatUserProfile({
    //     path: "/personalPages/coupon/coupon",
    //     navigateBack: true,
    //   });
    // }
    console.log("phone-----------------------", getApp().globalData.user);
    if (
      !getApp().globalData.user.phone ||
      getApp().globalData.user.phone === null ||
      getApp().globalData.user.phone === ""
    ) {
      uni.setStorageSync(
        "REDIRECT_URI",
        JSON.stringify({ path: "/personalPages/coupon/coupon" })
      );
      getApp().emdlz(
        "track",
        "event",
        "coupons_redemption_code",
        "pagejump",
        "enroll",
        ""
      );

      uni.navigateTo({ url: "/pages/vip/register" });
      return;
    }
    try {
      const { code, data } = await addCoupon({
        couponId: "e1fbba036c336d9d1f6cf2b295ee2674", // stage:482eb845136648cd430ff273b939a94d e1fbba036c336d9d1f6cf2b295ee2674
        appId: miniProgram.appId,
      });
      switch (code) {
        case 422:
          enterTime = new Date();

          couponStatus.value = "error";
          break;
        case 200:
          enterTime = new Date();

          uni.showToast({ title: "兑换成功", icon: "none" });
          if (data) couponInfo.value = data || {};
          couponStatus.value = "success";
          emits("upData");

          break;
      }
    } catch (e) {
      enterTime = new Date();
      couponStatus.value = "error";
    }
  },
  1000,
  false
);

const toGoods = () => {
  getApp().emdlz(
    "track",
    "event",
    "Stride_Campaign_get_success_page",
    "click",
    "check_use",
    ""
  );
  uni.redirectTo({
    url: `/pages/goods/goods?id=${"68ebcb96f9a83b5ed8d0836e79829a24"}`, // stage:ac0872a2b48e707f84bc7bba2a5621e5 68ebcb96f9a83b5ed8d0836e79829a24
  });
};

const lookCode = () => {
  getApp().emdlz(
    "track",
    "event",
    "Stride_Campaign_get_success_page",
    "click",
    "check_coupon",
    ""
  );
  emits("close");
  emits("upData");
};

const closeErr = () => {
  outTime = new Date();
  //停留时间(毫秒)
  stayTime = (outTime?.getTime() - enterTime?.getTime()) / 1000;
  getApp().emdlz(
    "track",
    "event",
    "Stride_Campaign_get_error_page",
    "view",
    "error_page",
    stayTime
  );
  getApp().emdlz(
    "track",
    "event",
    "Stride_Campaign_get_error_page",
    "click",
    "close_button",
    ""
  );
  couponStatus.value = "default";
  emits("close");
};
const toClose = () => {
  getApp().emdlz(
    "track",
    "event",
    "Stride_Campaign_get_page",
    "click",
    "close_tips",
    ""
  );

  outTime = new Date();
  //停留时间(毫秒)
  stayTime = (outTime?.getTime() - enterTime?.getTime()) / 1000;
  if (couponStatus.value === "success") {
    getApp().emdlz(
      "track",
      "event",
      "Stride_Campaign_get_success_page",
      "view",
      "success_page",
      stayTime
    );
  } else if (couponStatus.value === "error") {
    getApp().emdlz(
      "track",
      "event",
      "Stride_Campaign_get_error_page",
      "view",
      "error_page",
      stayTime
    );
  }
  emits("close");
};
</script>
  
  <style lang="scss" scoped>
.draw-body {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.2);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.dialog-box {
  width: 640rpx;
  height: 688rpx;
  background-repeat: no-repeat;
  background-position: top left;
  background-size: 100% 100%;
  position: relative;
  z-index: 0;
  .bg-image {
    position: absolute;
    z-index: -1;
  }
  image {
    display: block;
    z-index: 11;
  }
  .code-input {
    position: relative;
    display: flex;
    justify-content: center;
    margin: 22rpx 0 16rpx 0;
    input {
      width: 420rpx;
      position: absolute;
      color: white;
      font-size: 19px;
      height: 16px;
      top: 19px;
      text-align: center;
      font-weight: bold;
      z-index: 99;
    }
  }
}
</style>
  